<!--
 * @文件名称：  qRcode.vue
 * @包路径：
 * @版权所有： 小树苗 (C) 2020
 *
 * @文件描述:
 * @版本:
 * @作者        zhangshumiao
 * @创建时间    2020/4/22 22:01
 *
 * @修改记录：
  -----------------------------------------------------------------------------------------------
   ----------- 时间      |   修改人    |     修改的方法       |         修改描述   ---------------
  -----------------------------------------------------------------------------------------------
-->
<template>
  <el-row>
    <el-button @click="btn">按钮</el-button>
<!--    <canvas id="canvas"></canvas>-->
    <div id="qrcode" ref="qrcode"></div>
  </el-row>
</template>

<script>
// import QRCode from 'qrcode';
import QRCode from 'qrcodejs2';
export default {
  name: 'qRcode',
  data() {
    return {
      codeData: 1,
      setId: null
    }
  },
  mounted() {
  },
  methods: {
    btn() {
      let that = this;
      this.setId = setInterval(function () {
        that.codeData += 1;
        // that.useqrcode();
        that.qrcode();
      }, 10000)
    },
    useqrcode() {
      let imgUrl = null;
      console.log(this.codeData);
      if (this.codeData == 2) {
        imgUrl = 'http://www.baidu.com';
      } else if (this.codeData == 3) {
        imgUrl = 'https://fanyi.baidu.com/';
      } else {
        imgUrl = 'https://blog.csdn.net/qq449736038/article/details/80771947';
      }
      let canvas = document.getElementById('canvas')
      QRCode.toCanvas(canvas, imgUrl, {
        width: 250,
        height: 250
      }, function (error) {
        if (error) console.error(error)
        console.log('success!');
      })
    },
    qrcode() {
      this.$refs.qrcode.innerHTML = '';
      let imgUrl = null;
      console.log(this.codeData);
      if (this.codeData == 2) {
        imgUrl = 'http://www.baidu.com';
      } else if (this.codeData == 3) {
        imgUrl = 'https://fanyi.baidu.com/';
      } else {
        imgUrl = 'https://blog.csdn.net/qq449736038/article/details/80771947';
      }
      new QRCode(this.$refs.qrcode, {
        width: 232,
        height: 232,
        text: imgUrl, // 二维码地址
        colorDark: '#000',
        colorLight: '#fff',
      })
      // qrcode = imgUrl
    }
  }
}
</script>

<style>

</style>
